<div class="pm_modal small {{ctrl.class}}" role="dialog" style="display: block;">

    <div
        class="modal-dialog donateModal-container donateModal-type-{{::ctrl.typeOfModal}}"
        ng-class="{
            'donateModal-mode-cash': ctrl.method.value === 'cash',
            'donateModal-mode-paypal': ctrl.method.value === 'paypal',
            'donateModal-mode-bitcoin': ctrl.method.value === 'bitcoin'
        }"
        name="donateForm">

        <button
            type="button"
            ng-click="ctrl.close()"
            aria-hidden="true"
            title-translate="Close"
            title-translate-context="Action"
            class="fa fa-times close"></button>

        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title donateModal-title-donate" translate translate-context="Title">Donate</h4>
                <h4 class="modal-title donateModal-title-topUp" translate translate-context="Title">Add credits</h4>
            </div>

            <div class="modal-body pm_form">

                <donation
                    data-type="{{ ::ctrl.typeOfModal }}"
                    data-processing="ctrl.process"
                    data-method="ctrl.method"></donation>
            </div>
        </div>

        <div class="modal-footer donateModal-group-btn">

            <button
                type="button"
                class="pm_button modal-footer-button donateModal-btn-cancel"
                ng-click="ctrl.close()"
                translate
                translate-context="Action">Cancel</button>
            <button
                type="button"
                class="pm_button modal-footer-button donateModal-btn-close"
                ng-click="ctrl.close()"
                translate
                translate-context="Action">Close</button>

            <button
                data-donation-external-submit
                ng-disabled="ctrl.process === true"
                class="pm_button primary modal-footer-button donateModal-btn-donation">
                    <span
                        class="donateModal-action-donate"
                        translate-context="Action"
                        translate>Donate</span>
                    <span
                        class="donateModal-action-topUp"
                        translate-context="Action"
                        translate>top Up</span>
                </button>
        </div>
    </div>
    <div class="modal-overlay"></div>
</div>
